<template>
	<view class="records">
		<uni-list>
			<uni-list-item v-for="(item,index) in recordList" :key='index' :title="item.nickname"
				:note="item.create_date" :rightText="'+'+item.amount"></uni-list-item>
		</uni-list>

		<view class="nodata" v-if="recordList.length == 0">
			<image class="empty_img" :src="IMGLink+'/my/empty.png'" mode="widthFix"></image>
			<view>暂无记录</view>
		</view>
	</view>
</template>

<script>
	import {
		record
	} from "@/api/my/my.js";
	export default {
		data() {
			return {
				recordList: [],
				page: 1,
				page_size: 20,
				total: 0
			}
		},
		created() {
			this.getList();
		},
		methods: {
			getList(isLoad = false) {
				uni.showLoading({
					title: '加载中..'
				})
				return new Promise((r) => {
					record({
						page: this.page,
						page_size: this.page_size,
					}).then(({
						data: {
							data
						},
						total
					}) => {
						this.recordList = isLoad ? [...this.recordList, ...data] : data;
						this.total = total;
						uni.hideLoading();
						r()
					}).catch(() => {
						uni.hideLoading()
						r();
					})
				})

			},
			onPullDownRefresh() {
				this.page = 1;
				this.getList();
				this.getList().then(res => {
					uni.stopPullDownRefresh();
				})
			},
			onReachBottom() {
				uni.showLoading({
					title: '加载中'
				});
				setTimeout(() => {
					uni.hideLoading();
					if (this.recordList.length < this.total) {
						this.getList(true)
					}
				}, 1000);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.records {
		padding: 0 20rpx;

		/deep/ .uni-list--border-top,
		/deep/ .uni-list--border-bottom {
			background-color: transparent;
		}

		/deep/ .uni-list-item__content-title {
			color: #393939;
			font-size: 32rpx;
		}

		/deep/ .uni-list-item__content-note {
			color: #6D6D6D;
			font-size: 26rpx;
		}

		/deep/ .uni-list-item__extra-text {
			color: #393939;
			font-size: 42rpx;
		}

		/deep/ .uni-list-item__container {
			padding: 28rpx 0;
		}

		.nodata {
			text-align: center;
			color: #7D7D7D;
			font-size: 24rpx;
			margin-top: 50%;

			.empty_img {
				width: 468rpx;
			}
		}
	}
</style>
